import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function VideoScript() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const topicRef = useRef<HTMLDivElement>(null);
  const purposeRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const audienceRef = useRef<HTMLDivElement>(null);
  const keyPointsRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成视频文案的模拟函数
  const generateContent = (topic: string, purpose: string, style: string, targetAudience: string, keyPoints: string): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 根据视频风格添加开头
    if (style === '幽默搞笑') {
      result += "【开场】（夸张表情）大家好~ 今天我们要聊的话题绝对能让你笑到停不下来！😆 #" + topic + "#\n\n";
    } else if (style === '专业讲解') {
      result += "【开场】大家好，我是XX，今天我将从专业角度为大家详细讲解#" + topic + "#\n\n";
    } else if (style === '情感故事') {
      result += "【开场】（深情语气）不知道大家有没有经历过这样的事情... 今天我想和大家分享一个关于#" + topic + "#的真实故事\n\n";
    } else if (style === '知识科普') {
      result += "【开场】你知道吗？#" + topic + "# 背后居然有这么多你不知道的冷知识！今天我就来为大家一一揭秘\n\n";
    }

    // 主体内容
    result += "【主体】\n";

    if (keyPoints) {
      // 将关键点分割成数组
      const points = keyPoints.split('\n').filter(p => p.trim());

      points.forEach((point, index) => {
        result += `💡 第${index + 1}点：${point}\n`;
      });
    } else {
      // 根据目的和目标受众生成默认内容
      if (purpose === '产品推广') {
        result += "首先，我们来看看这个产品的核心卖点...\n";
        result += "我为什么要推荐给大家呢？有三个重要原因...\n";
        result += "使用这个产品后，我的生活发生了哪些改变...\n";
      } else if (purpose === '知识分享') {
        result += "这个知识点其实包含三个关键点...\n";
        result += "让我们通过一个简单的例子来理解...\n";
        result += "掌握了这个知识后，你可以...\n";
      } else if (purpose === '故事讲述') {
        result += "那是一个普通的周末，我像往常一样...\n";
        result += "突然，发生了一件让我意想不到的事情...\n";
        result += "从那以后，我对生活有了新的理解...\n";
      } else if (purpose === '经验分享') {
        result += "我尝试了很多方法，总结出这几点经验...\n";
        result += "如果你也遇到类似问题，可以这样做...\n";
        result += "这些小技巧能帮你少走很多弯路...\n";
      }
    }

    // 互动环节
    result += "\n【互动】\n";
    result += "你们有没有类似的经历？欢迎在评论区分享！\n";
    result += "如果你觉得这个视频对你有帮助，记得点赞收藏哦~\n\n";

    // 结尾
    result += "【结尾】\n";
    if (style === '幽默搞笑') {
      result += "好了，今天的视频就到这里！我们下期再见~ 别忘了关注我，不然你会错过更多精彩内容哦！拜拜~👋\n";
    } else if (style === '专业讲解') {
      result += "以上就是今天的全部内容，希望能帮助到大家。如果有任何问题，欢迎在评论区留言讨论。我们下期再见！\n";
    } else if (style === '情感故事') {
      result += "感谢大家听完这个故事，希望它能给你带来一些启示。如果你喜欢我的分享，记得关注我哦~ 我们下次再聊！\n";
    } else if (style === '知识科普') {
      result += "今天的科普就到这里，是不是很涨知识呢？如果你还想了解更多相关内容，记得点赞关注，我们下期继续！\n";
    }

    // 提醒关注
    result += "\n【关注引导】\n";
    result += "👉 点击头像关注我，不错过每一期精彩内容\n";
    result += "👉 点赞收藏，干货内容随时回顾\n";
    result += "👉 转发分享给你的朋友，一起成长\n";

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { topic, purpose, style, targetAudience, keyPoints } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(topic, purpose, style, targetAudience, keyPoints);
      setGeneratedContent(generated);
      message.success('视频文案生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '视频文案.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'topic',
      title: '输入视频主题',
      description: '请输入您想要制作的视频主题',
    },
    {
      key: 'purpose',
      title: '选择视频目的',
      description: '选择您制作视频的主要目的，如产品推广、知识分享等',
    },
    {
      key: 'style',
      title: '选择视频风格',
      description: '选择您想要的视频风格，如幽默搞笑、专业讲解等',
    },
    {
      key: 'audience',
      title: '选择目标受众',
      description: '选择您视频的目标观看人群',
    },
    {
      key: 'keyPoints',
      title: '核心要点（可选）',
      description: '您可以输入视频的核心要点，每行一个要点，如不填写将自动生成',
    },
    {
      key: 'submit',
      title: '生成视频文案',
      description: '点击按钮生成完整的视频文案脚本',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的视频文案',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    topic: topicRef,
    purpose: purposeRef,
    style: styleRef,
    audience: audienceRef,
    keyPoints: keyPointsRef,
    submit: submitRef,
    result: resultRef,
  };

  // 视频目的选项
  const purposeOptions = [
    { label: '产品推广', value: '产品推广' },
    { label: '知识分享', value: '知识分享' },
    { label: '故事讲述', value: '故事讲述' },
    { label: '经验分享', value: '经验分享' },
  ];

  // 视频风格选项
  const styleOptions = [
    { label: '幽默搞笑', value: '幽默搞笑' },
    { label: '专业讲解', value: '专业讲解' },
    { label: '情感故事', value: '情感故事' },
    { label: '知识科普', value: '知识科普' },
  ];

  // 目标受众选项
  const audienceOptions = [
    { label: '年轻人', value: '年轻人' },
    { label: '职场人士', value: '职场人士' },
    { label: '宝妈', value: '宝妈' },
    { label: '学生', value: '学生' },
    { label: '大众', value: '大众' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            视频文案生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              purpose: '产品推广',
              style: '幽默搞笑',
              targetAudience: '年轻人',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="topic"
                  label="视频主题"
                  rules={[{ required: true, message: '请输入视频主题' }]}
                >
                  <div ref={topicRef}>
                    <Input placeholder="请输入视频主题" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="purpose"
                  label="视频目的"
                  rules={[{ required: true, message: '请选择视频目的' }]}
                >
                  <div ref={purposeRef}>
                    <Select placeholder="请选择视频目的" options={purposeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="视频风格"
                  rules={[{ required: true, message: '请选择视频风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择视频风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="targetAudience"
                  label="目标受众"
                  rules={[{ required: true, message: '请选择目标受众' }]}
                >
                  <div ref={audienceRef}>
                    <Select placeholder="请选择目标受众" options={audienceOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="keyPoints"
                  label="核心要点（可选）"
                >
                  <div ref={keyPointsRef}>
                    <TextArea rows={4} placeholder="请输入视频的核心要点，每行一个要点，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成视频文案'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
}